import React, { FC, useState } from 'react';
import { Select, Button, Card, Table, Modal, Input } from 'antd';
import './class.css';

const { Option } = Select;

const SchoolInfoAudit: FC = () => {
  // 表格数据
  const [dataSource, setDataSource] = useState([
    {
      key: '1',
      category: '农林类',
      majorClass: '农业类',
      major: '农业',
      grade: '一年级',
      alias: '一',
      code: '101', // 专业码
      expanded: false,
    },
    {
      key: '2',
      category: '兽医类',
      majorClass: '兽医类',
      major: '兽医',
      grade: '二年级',
      alias: '二',
      code: '102', // 专业码
      expanded: false,
    },
    {
      key: '3',
      category: '渔业类',
      majorClass: '渔业类',
      major: '渔业',
      grade: '三年级',
      alias: '三',
      code: '103', // 专业码
      expanded: false,
    },
    {
      key: '4',
      category: '农林类',
      majorClass: '林业类',
      major: '林业',
      grade: '四年级',
      alias: '四',
      code: '104', // 专业码
      expanded: false,
    },
  ]);

  // Modal 状态
  const [isModalVisible, setIsModalVisible] = useState(false);

  // 控制详情div显示的状态
  const [detailVisible, setDetailVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState(null);

  // 表格列定义
  const columns = [
    { title: '专业名称(学科门类)', dataIndex: 'category', key: 'category' },
    { title: '专业名称(专业类)', dataIndex: 'majorClass', key: 'majorClass' },
    { title: '专业名称(专业)', dataIndex: 'major', key: 'major' },
    { title: '年级', dataIndex: 'grade', key: 'grade' },
    { title: '年级别名', dataIndex: 'alias', key: 'alias' },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (text, record) => (
        <div>
          <Button type="link" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Button type="link" onClick={() => handleDelete(record.key)}>
            删除
          </Button>
          <Button type="link" onClick={() => handleViewDetails(record)}>
            查看详情
          </Button>
        </div>
      ),
    },
  ];

  const handleEdit = record => {
    console.log('编辑专业:', record);
  };

  const handleDelete = key => {
    setDataSource(prevData => prevData.filter(item => item.key !== key));
    console.log('删除专业，专业码:', key);
  };

  const handleViewDetails = record => {
    setCurrentRecord(record);
    setDetailVisible(!detailVisible);
  };

  const toggleExpand = key => {
    setDataSource(prevData => prevData.map(item => (item.key === key ? { ...item, expanded: !item.expanded } : item)));
  };

  const handleCreateClassClick = () => {
    setIsModalVisible(true);
  };

  const handleModalOk = () => {
    // 提交逻辑
    console.log('提交课程');
    setIsModalVisible(false);
  };

  const handleModalCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <div>
      <div
        style={{
          backgroundColor: 'white',
          padding: '10px 20px',
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          marginBottom: '20px',
          fontSize: '20px',
          fontWeight: 'bold',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <span>年级管理(校)</span>
        <Button type="primary">整体提交</Button>
      </div>
      <Card
        style={{
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        }}
      >
        <div className="menu" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Button type="link" style={{ padding: 0 }}>
            历史记录
          </Button>
        </div>
        <hr style={{ margin: '10px 0', border: '1px solid #e8e8e8' }} />
        {detailVisible && currentRecord && (
          <div style={{ padding: '10px', backgroundColor: '#f0f0f0', margin: '10px 0' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <p>学校名字: {currentRecord.major}</p>
              <p>机构编码: {currentRecord.code}</p>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <p>行政管辖区: {currentRecord.category}</p>
              <p>学校性质: 公立</p>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <p>办学类型: 普通</p>
            </div>
          </div>
        )}
        <div className="con">
          <div className="left">
            <div className="professioname">
              <span>专业名称</span>
              <span>专业码</span>
            </div>
            <div className="professcon">
              {dataSource.map(item => (
                <div key={item.key} style={{ marginBottom: '10px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <button
                      onClick={() => toggleExpand(item.key)}
                      style={{ border: 'none', background: 'none', cursor: 'pointer' }}
                    >
                      {item.expanded ? '-' : '+'} {item.majorClass}
                    </button>
                    <span>123</span>
                  </div>
                  {item.expanded && (
                    <div style={{ paddingLeft: '20px' }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <p>{item.major}</p>
                        <p className="p1">{item.code}</p>
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
          <div className="right">
            <div className="selectr" style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', marginBottom: '10px' }}>
                <div style={{ marginRight: '10px' }}>
                  <span>年级电话：</span>
                  <Input placeholder="请输入年级电话" style={{ width: '150px' }} />
                </div>
                <div style={{ marginRight: '10px' }}>
                  <span>年级：</span>
                  <Select defaultValue="选择年级" style={{ width: 120 }}>
                    <Option value="grade1">一年级</Option>
                    <Option value="grade2">二年级</Option>
                    <Option value="grade3">三年级</Option>
                  </Select>
                </div>
                <div style={{ marginRight: '10px' }}>
                  <span>专业名称：</span>
                  <Select defaultValue="选择专业" style={{ width: 120 }}>
                    <Option value="major1">农林类</Option>
                    <Option value="major2">兽医类</Option>
                    <Option value="major3">渔业类</Option>
                  </Select>
                </div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Button type="primary" style={{ marginRight: 'auto' }} onClick={handleCreateClassClick}>
                  创建年级
                </Button>
                <div style={{ display: 'flex' }}>
                  <Button type="primary" style={{ marginRight: '10px' }}>
                    查询
                  </Button>
                  <Button>重置</Button>
                </div>
              </div>
              <Table dataSource={dataSource} columns={columns} pagination={false} />
            </div>
          </div>
        </div>
      </Card>

      {/* 创建班级的 Modal */}
      <Modal title="创建班级" visible={isModalVisible} onOk={handleModalOk} onCancel={handleModalCancel}>
        <div>
          <div>
            <span>课程名称：</span>
            <Input placeholder="请输入课程名称" />
          </div>
          <div>
            <span>学科：</span>
            <Select style={{ width: '100%' }}>
              <Option value="subject1">数学</Option>
              <Option value="subject2">语文</Option>
              <Option value="subject3">英语</Option>
            </Select>
          </div>
          <div>
            <span>课程名称：</span>
            <Input placeholder="请输入课程名称" />
          </div>
          <div>
            <span>所属年级：</span>
            <Select style={{ width: '100%' }}>
              <Option value="grade1">一年级</Option>
              <Option value="grade2">二年级</Option>
              <Option value="grade3">三年级</Option>
            </Select>
          </div>
          <div>
            <span>专业名称(学科门类)：</span>
            <Select style={{ width: '100%' }}>
              <Option value="category1">农林类</Option>
              <Option value="category2">兽医类</Option>
              <Option value="category3">渔业类</Option>
            </Select>
          </div>
          <div>
            <span>专业名称(专业类)：</span>
            <Select style={{ width: '100%' }}>
              <Option value="majorClass1">农业</Option>
              <Option value="majorClass2">动物医学</Option>
              <Option value="majorClass3">水产养殖</Option>
            </Select>
          </div>
          <div>
            <span>专业名称(专业)：</span>
            <Select style={{ width: '100%' }}>
              <Option value="major1">农学</Option>
              <Option value="major2">兽医学</Option>
              <Option value="major3">水产科学</Option>
            </Select>
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default SchoolInfoAudit;
